<template>
  <div class="all">
    <layheade>
      <span slot="head-title" class="head-title">系统通知</span>
    </layheade>
    <!-- 消息通知 -->
    <van-cell-group>
      <van-cell>
        <div class="row-layout" slot="title">
          <div class="row-l">
            <van-icon name="volume-o" dot color="#fff" />
          </div>
          <van-cell title="通知" label="您接收到了一条消息!请查收"></van-cell>
        </div>
      </van-cell>
      <van-cell>
        <div class="row-layout" slot="title">
          <div class="row-l">
            <van-icon name="volume-o" color="#fff" />
          </div>
          <van-cell title="通知" label="您接收到了一条消息!请查收"></van-cell>
        </div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import layheade from "../components/layheade";
export default {
  name: "systemMessages",
  components: {
    layheade
  }
};
</script>

<style lang="less" scoped>
.all {
  background-color: #f8f8f8ff;
  width: 100%;
  height: 100%;
}
.van-cell-group {
  margin-top: 5px;
}
.row-layout {
  display: flex;
  align-items: center;
  .row-l {
    width: 46px;
    height: 41px;
    background-color: #ff7e19ff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-icon {
      font-size: 26px;
    }
    .van-cell {
      flex: 1;
    }
  }
  
}
</style>